<template>
  <section class="content-view wrapper">
    <div class="local-region">
      <toast v-model="show1" content="提示内容"/>
      <toast v-model="show2" type="success" content="提示内容"/>
      <toast v-model="show3" type="error" position="top" content="提示内容"/>
      <toast
        v-model="show4"
        :time="5000"
        type="cancel"
        position="bottom"
        content="提示内容"/>
    </div>

    <h2 class="item-title">标签用法 (通常在局部显示时使用)</h2>
    <h-button class="button-class" type="rimless" shadow @click.native="showToastText">Toast (文字)</h-button>
    <h-button class="button-class" type="rimless" shadow @click.native="showToastSuccess">Toast (成功)</h-button>
    <h-button class="button-class" type="rimless" shadow @click.native="showToastError">Toast (失败)</h-button>
    <h-button class="button-class" type="rimless" shadow @click.native="showToastCancel">Toast (取消)</h-button>

    <h2 class="item-title">插件用法</h2>
    <h-button class="button-class purple" type="rimless" shadow @click.native="handleToast">ToastPlugin</h-button>
  </section>
</template>

<script>
import Vue from 'vue'
import { HButton, Toast, ToastPlugin } from 'hippius'

Vue.use(ToastPlugin)

export default {
  components: {
    HButton,
    Toast,
  },
  data () {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
    }
  },
  methods: {
    // 标签用法
    showToastText () {
      if (this.show1) return
      this.show1 = true
    },
    showToastSuccess () {
      if (this.show2) return
      this.show2 = true
    },
    showToastError () {
      if (this.show3) return
      this.show3 = true
    },
    showToastCancel () {
      if (this.show4) return
      this.show4 = true
    },
    // 插件用法
    showToast (ops = {}) {
      this.$toast.show({
        type: ops.type,
        content: ops.content,
        position: ops.position,
        time: ops.time,
        onShow: ops.onShow,
        onHide: ops.onHide,
      })
    },
    handleToast () {
      this.showToast({
        type: 'text',
        content: '提示内容',
        position: 'bottom',
        time: 2000,
        onShow: () => {
          console.log('on-show')
        },
        onHide: () => {
          console.log('on-hide')
        },
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.wrapper {
  padding: 20px 6%;

  .button-class {
    width: 95%;
    margin: 6px 2.5%;
    font-size: 14px;
    color: cadetblue;
    border-radius: 3px;
  }

  .purple {
    color: #fff;
    background-color: #7e57c2;
    border: 1px solid #7e57c2;
  }

  .local-region {
    overflow: hidden;
    position: relative;
    height: 200px;
    background-color: #eee;
  }
}
</style>
